<template>
	<div>
		<el-form-item
			label="题干"
			prop="questionTitle"
			:rules="{
				required: true,
				message: '请输入题干',
				trigger: ['blur', 'change']
			}"
		>
			<template>
				<el-input v-model.trim="questionForm.questionTitle" maxlength="2000">
					<i slot="suffix" @click="handleEdit(questionForm.questionTitle,'questionTitle')" class="el-icon-edit-outline icons" />
				</el-input>
			</template>
		</el-form-item>
		<!-- 单选题 -->
		<el-form-item
			label="选项"
			required
			:class="errorText?'':'item-option'"
		>
			<template v-if="questionType ==='S'">
				<el-radio-group v-model="answer" class="options-group" @change="change">
					<el-form-item
						v-for="(item, index) in questionForm.optionList"
						:key="item.key+item.optionSeq"
						:prop="'optionList.' + index"
						:rules="{
							required: true, validator:checkOption, trigger: ['blur', 'change']
						}"
					>
						<div class="options-item">
							<el-radio
								class="options-item"
								:label="item.optionSeq"
								:key="item.key+item.optionSeq"
							/>
							<select-options
								:value="item"
								:index="index"
								:is-show-seq="false"
								:max-length="500"
								:disabled="parentType==='C'"
								:is-add="parentType!=='C' && index===0"
								:is-editor="parentType!=='C'"
								:is-del="index===questionForm.optionList.length-1 && index!=1 && parentType!=='C'"
								@add="add"
								@del="del"
								@edit="handleEdit"
							/>
						</div>
					</el-form-item>
				</el-radio-group>
			</template>
			<template v-if="questionType ==='M' || questionType === 'I'">
				<el-checkbox-group v-model="answers" class="options-group" @change="change">
					<el-form-item
						v-for="(item, index) in questionForm.optionList"
						:key="item.key+item.optionSeq"
						:prop="'optionList.' + index"
						:rules="{
							required: true,validator:checkOption, trigger: ['blur', 'change']
						}"
					>
						<div class="options-item">
							<el-checkbox
								:label="item.optionSeq"
								:key="item.key+item.optionSeq"
							/>
							<select-options
								:value="item"
								:index="index"
								:is-show-seq="false"
								:disabled="parentType==='C'"
								:is-add="parentType!=='C' && index===0"
								:is-del="index===questionForm.optionList.length-1 && index!=1 && parentType!=='C'"
								:is-editor="parentType!=='C'"
								:max-length="500"
								@add="add"
								@del="del"
								@edit="handleEdit"
							/>
						</div>
					</el-form-item>
				</el-checkbox-group>
			</template>
			<p class="el-form-item__error" v-if="errorText">{{ errorText }}</p>
		</el-form-item>
	</div>
</template>
<script src="./edit.mjs"></script>
<style scoped lang="less">
.options-group{
    flex: 1;
    display: flex;
    flex-direction: column;
    &>label{
      margin-right: 0;
    }
    /deep/ .el-radio,.el-checkbox{
        margin-right: 10px;
    }
    /deep/ .el-checkbox{
        display: flex;
        align-items: center;
    }
    /deep/.el-radio__label,
    /deep/ .el-checkbox__label{
        display: flex;
        flex: 1;
    }
}
.options-item{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.icons{
    cursor: pointer;
    font-size: 20px;
    margin-top: 7px;
}
.item-option{
    margin-bottom: 0;
}

</style>
